<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '代理管理',
  },
}
</route>

<template>
  <view class="container">
    <wd-search
      v-model="value"
      @focus="focus"
      @blur="blur"
      @search="search"
      @clear="clear"
      @cancel="cancel"
      @change="change"
      cancel-txt="搜索"
    />
    <view v-for="item in list as any" :key="item.id" class="list-item">
      <wd-cell :title="item.deviceNo" custom-title-class="ml-2">
        <image slot="icon" style="width: 20px; height: 20px" src="@/static/home/device.png" />

        <view>
          <wd-tag custom-class="space" type="success" v-if="item.deviceStatus === 1">在线</wd-tag>
          <wd-tag custom-class="space" type="danger" v-else>离线</wd-tag>
        </view>
      </wd-cell>
    </view>
    <wd-loadmore :state="state" @reload="loadmore" />
  </view>
</template>

<script lang="ts" setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { httpPost } from '@/utils/http'

const list = ref<any[]>([])
const num = ref<number>(1)
const max = ref<number>(20)

 
const getList = async () => {
  const _res: any = await httpPost('/api/app/user/info/getAgentList', {
    page: num.value,
    size: 20,
  })

  list.value = [...(list.value ?? []), ...(_res?.list ?? [])]
  max.value = _res.pagination?.total || 0
  state.value = 'finished'
}
const state = ref<any>('loading')

onReachBottom(() => {
  if (list?.value?.length < max.value) {
    loadmore()
  } else if (list?.value?.length === max.value) {
    state.value = 'finished'
  }
})

onLoad(() => {
  getList()
})

function loadmore() {
  num.value = num.value + 1
  getList()
}

const value = ref<string>('')

function focus() {
  console.log('聚焦')
}
function blur() {
  console.log('失焦')
}
function search() {
  console.log('搜索')
}
function clear() {
  console.log('重置')
}
function cancel() {
  console.log('取消')
}
function change({ value }) {
  console.log('输入', value)
}
</script>

<style lang="scss" scoped>
.list-item {
  position: relative;
  //   display: flex;
  padding: 3px 10px;
  color: #464646;
}

.list-item:after {
  position: absolute;
  display: block;
  content: '';
  height: 1px;
  left: 0;
  width: 100%;
  bottom: 0;
  background: #eee;
  transform: scaleY(0.5);
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.content {
  justify-content: flex-start;
}

:deep(.wd-card__title-content) {
  display: none;
}
:deep(.wd-card__footer) {
  //   display: none;
  padding: 0;
}

:deep(.wd-card) {
  padding-top: 12px;
}
</style>
